<template>
	<span class="message-logo" :style="style">
		{{message}}
	</span>
</template>

<script>
	export default {
		name: "messageLogo",
		props: {
			message: {
				type: [Number, String],
				required: true
			},
			top: {
				type: [Number, String],
				default: 0
			},
			right: {
				type: [Number, String],
				default: 0
			},
			type: {
				type: String,
				default: 'crimson',
				validator: function (value) {
					return ['green', 'crimson', 'red', 'yellow'].indexOf(value) > -1;
				}
			}
		},
		computed: {
			style() {
				return {
					top: this.top,
					right: this.right,
					backgroundColor: this.type
				}
			}
		}
	}
</script>
